<template>
  <div class="header">
    <div class="head-left">
      <router-link to = '/'>
        <img :src = header.backUrl alt="请等待" v-if = header.backUrl>
      </router-link>
      <img src="../../static/images/header-img.png" alt="请等待" class="hos-logo">
      <span class="h-name">国家肾脏病临床医学研究中心</span>
    </div>
    <div class="head-tit">
      {{header.tit || ''}}
    </div>
    <div class="head-right">
      <span class="desk-name">{{header.deskName||""}}</span>
      <span class="ymd">{{ymd.data}}</span>
      <span class="week">{{ymd.currentTime}}</span>
      <span class="hm">{{ymd.nowTime}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: ['header'],
  data () {
    return {
      ymd: {}
    }
  },
  created () {
    setInterval(() => {
      this.ymd = this.timeFormate()
    }, 1000)
  }
}
</script>

<style lang="stylus" scoped>
.header
  position relative
  height 0.8rem
  line-height 0.8rem
  background-color #1090eb
  color #fff
  .head-left
    position absolute
    left 0.3rem
    top 0
    font-size 0.32rem
    .hos-logo
      width 0.48rem
    .h-name
      vertical-align middle
  .head-right
    position absolute
    right 0.3rem
    top 0
    font-size 0.24rem
    .desk-name
      font-size 0.36rem
      vertical-align middle
    span
      vertical-align middle
    .week
      margin 0 0.1rem
  .head-tit
    text-align center
    font-size 0.36rem
</style>
